<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      子组件如何通知父组件：
        1. 子组件通过实例方法 $emit 触发一个自定义事件
        2. 父组件在调用该子组件时，可以通过 v-on 绑定该自定义事件

      $emit 的语法：
        this.$emit(eventName, payload)
          eventName: 事件名字
          payload: 触发事件时，携带的参数。如果需要携带更多参数的化，可以将payload写成对象的形式。
                   payload 的内容，在绑定事件时，可以通过 $event 接受到

      $event总结
        是一个特殊变量
        在普通事件处理中，$event是事件对象
        在自定义事件处理中，$event是触发该自定义事件时传递过来的参数（payload）
     -->

    <div id="app">
      <hello
        :name="myName"
        @change="handleChange(123,$event)"
        @hello-world="handleAbcd"
      ></hello>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      Vue.component("hello", {
        template: `
          <div>
            <h2>Hello, {{ name }}</h2>  
            <button @click="fn1">触发自定义事件1</button>
            <button @click="fn2">触发自定义事件2</button>
          </div>
        `,
        props: ["name"],
        methods: {
          fn1() {
            // 通知父组件
            this.$emit("change", "李四");
          },

          fn2() {
            this.$emit("hello-world");
          },
        },
      });

      const vm = new Vue({
        el: "#app",
        data: {
          myName: "张三",
        },
        methods: {
          handleChange(number, payload) {
            console.log("handleChange", payload);
            this.myName = payload;
          },

          handleAbcd() {
            console.log("handleAbcd");
          },
        },
      });
    </script>
  </body>
</html>
